<template>
	<view class="content">
		<view class="user-section margin-lr" style="background-image: url(/static/images/sports_top.png);">
			<view class="user-info-box">
				<view class="info-box text-center padding">
					<view class="padding text-white text-xxl"> {{ remaining }}</view>
					<view class="padding-lr text-white text-xl">倒计时</view>
				</view>
			</view>
		</view>
		<view class="cu-card">
			<view class="cu-item" v-for="(item, index) in list" :key="index">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar lg" :style="'background-image: url('+weburl+item.photo+');'"></view>
						<view class="content">
							<view>
								<view class="text-bold text-lg">{{ item.name }}</view>
								<view class="margin-left text-gray">
									<text> 运动{{ item.num }}分钟</text>
								</view>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-orange text-xs">+{{ item.jifen }} 积分</view>
							</view>
						</view>
						<view class="action">
							<view class="text-xs cu-btn bg-red text-white round sm" v-if="item.status == 0" @click="doSport(item,index)">{{ item.status_str }}</view>
							<view class="text-xs cu-btn line-grey round sm" v-else-if="item.status == 1">{{ item.status_str }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
		data() {
			return {
				remaining:'00:00',
				duration:300,
				sports_id:0,
				list:[]
			};
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getSportsList();
		},
		onUnload(){
			// 页面关闭移除计时器，否则app平台有BUG
			clearInterval(this.cTime);
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/other?type=sports',
			});	
		},
		onBackPress: function (option) {
            if (options.from === 'navigateBack') {  
				uni.switchTab({
					url: '/pages/index/index'
				})  
            } 
            return true;  
        }, 
		methods: {
			getSportsList:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getSports",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.list = res.data.data.list;
					
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			djs: function(ms) { 
				var minite = parseInt((ms % (60 * 60)) / 60);
				var second = (ms % (60 * 60)) % 60;
				if (second < 10) {
					second = "0" + second;
				}
				if (minite < 10) {
					minite = "0" + minite;
				}
				return minite + ":" + second;
			},
			doSport:function(item,index){
				if(this.sports_id > 0){
					uni.showModal({
						title:"提示",
						content:"无法同时做两个运动!",
						showCancel:false,
						confirmText:"确定",
						success:(e)=>{
							uni.hideModal();
						}
					})
				}else{
					this.duration = item.num*60;
					this.sports_id = item.id;
					this.list[index]['status_str'] = '运动中';
					this.downTime();
				}
			},
			// 倒计时
			downTime:function(){
				this.cTime = setInterval(()=>{
					if(this.duration>0){
						this.remaining = this.djs(this.duration-1);
						this.duration -- ;
					}else{
						clearInterval(this.cTime);
						var info = uni.getStorageSync("userinfo");
						let timestamp = this.helper.now();
						let sign = this.helper.setSign(['sports_id='+this.sports_id,'token='+info.token,'timestamp='+timestamp]);
						this.helper.req({
							api:"doSports",
							timestamp:timestamp,
							data:{sports_id:this.sports_id,token:info.token},
							header:{sign:sign},
							method:'POST',
						}).then(res=>{
							uni.showModal({
								title:"提示",
								content:res.data.message,
								showCancel:false,
								confirmText:"确定",
								success:(e)=>{
									if(e.confirm){
										uni.redirectTo({
											url: '/pages/games/sports',
										});	
									}
								}
							})
						})
					}
				},1000);
			},
		},
	};
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.user-section{
		height: 300upx;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: bottom;
	}
	.cu-card > .cu-item{
		margin: 10upx;
	}
	.cu-avatar.lg {
	    width: 80upx;
	    height: 85upx;
	    background-color: #fff;
	}
</style>
